<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>

    <div class="box">
        <span>name：{{name}}</span><br>
        <span>age：{{age}}</span><br>
        <span>sex：{{sex}}</span><br>
    </div>

</body>
<script>

    const obj = {
        name:"admin",
        age:18,
        sex:"男",
        setName:function(xxx){
            console.log("name属性被修改成了：" + xxx);
            this.name = xxx;
            span.innerHTML = this.name;
        },
        getName:function(){
            console.log("name属性被访问了");
            return this.name;
        }
    }

    const span = document.querySelector(".box span");
    span.innerHTML = obj.name;

    // 劫持了数据的修改
    obj.setName("root");
    
    // 劫持了数据的查询
    obj.getName();


</script>
</html>